Crear menus o elementos que se muestren con una animación al hacer click sobre un botón o otro elemento.

Código de ejemplo

Para generar un menu desplegable utilizaremos Javascript la propiedad height de CSS y las transiciones de CSS

Generamos dos divs uno será el elemento que pulsaremos para mostrar el menu y otro sería el propio menu desplegable

Despues le damos estilo a los div, al que actua como menu desplegable tendremos que ponerle un height de "0px" y overflow:hidden de esta manera el div no se mostrará por defecto, a mayores tambien le pondremos transition: height 0.2s ease-out; para que el menu se muestre con una animación y no se muestre instantaneamente

A continuacion, en el código javascript, asociamos el primer div a un EventListener con el evento click y comprobamos cual es el estado del segundo div si el div tiene asociado un height de 50px lo ponemos a 0px y en caso contratrio lo ponemos a 50px

A continuación todo el código:

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <style>
      #desplegable{
        display: flex;
        justify-content: center;
        align-items: center;

        width:200px;
        height:50px;
        background-color:tomato;
      }
      #menu{
        width:200px;
        height:0px;
        background-color:lightblue;
        overflow: hidden;
        transition: height 0.2s ease-out;
      }
    </style>
  </head>
  <body>
    <div id="desplegable">Menu desplegable</div>

    <div id="menu"><p>texto de ejemplo</p></div>

    <script type="text/javascript">
      var desplegable = document.getElementById("desplegable");

      var menuColl = document.getElementById("menu");

      desplegable.addEventListener("click", function() {
        if(menuColl.style.height == "50px"){
          menuColl.style.height = "0px";
        }
        else{
          menuColl.style.height = "50px";
        }
      });
    </script>

  </body>
</html>

Web development | Javascript | CSS | colapsable